<template>
<div>
    <div class="topic">
        <div class="topic-left">
            <div class="button-back" @click="Close" >返回</div>
            <div class="shop-id"> {{ shop.id }}  </div>
            <div class="shop-name">{{ shop.name }}</div>
            <div class="shop-area"> 第{{ currentArmAreaIdx }}号防区</div>
        </div>
        <div class="topic-right">
            <span class="" >防区状态：</span> <span>{{ ShowArmAreaStatus( currentArmAreaStatus ) }}</span> 
        </div>
        <div class="topic-padding">
        </div>
    </div>
    <div class="body" >
        <div class="right-info" >
            <h2>防区信息</h2>
            <p>
                IP: {{protector.ip}}
            </p>
            <p>
            MAC: {{protector.mac}}
            </p>
            <p>
            主机类型: {{ protector.detail }}
            </p>
            <p>
            防区号: {{ currentArmAreaIdx }}
            </p>
            <p>
            当前状态: {{ ShowArmAreaStatus( currentArmAreaStatus ) }}
            </p>
            <div>
                <ul class="list-group">
                    <li class="list-group-item" v-for="channel in currentChannels" @click="clickStartPlay( channel )">
                        {{ channel }}
                    </li>
                </ul>
                <button @click="testNVR">
                    测试401 nvr 按钮
                </button>
            </div>
        </div>
        <div class="left-video">
            <iframe name='videoframe'>
            <div id="rtspvideo" class="plugin" >
            </div>
            </iframe>
        </div>
    </div>
</div>
</template>

<style scoped>
.button-back{
    width: 100px;
    height: 50px;
    font-size: 30px;
    border-radius: 10px;
    background-color: #aaa;
    text-align: center;
    padding-top: 10px;
}
.topic{
    margin:0px;
    width: 100%;
    height:150px;
    padding-top:19px;
    padding-bottom: 19px;
}
.topic-padding{
    height: 138x;
    min-height: 100px;
}
.topic-left{
    margin: 17px 20px;
    float: left;
    line-height: 100%;
}
.topic-left > div{
    display:inline-block;
    margin: 0 20px;
    line-height: 100%;
    font-size: 30px;
}

.topic-right{
    margin: 17px 20px;
    float: right;
    font-size: 30px;
}

.topic-right > div{ 
    display: inline-block;
}

.body{ 
    width: 100%;
}
.left-video{
    height:600px;
    margin-right:400px;
    background-color: #ddd;
}
.left-video video{ 
    width: 100%;
    height: 60%;
}
.right-info{ 
    float:right;
    width: 400px;
    text-align: center;
}

.flex-control{
    margin: auto;
    width: 360px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.flex-button{
    border-radius:20px;
    font-size: 20px;
    height: 40px;
    min-width: 120px;
    margin: 20px;
}
</style>

<script>
import axios from 'axios'
import { initHikvision, clickLogin, clickGetChannels, clickStartRealPlay } from '@/common/hikvision'
import bus from './bus'

export default{ 
    name: "armarea",
    //props: 'mac', 'arm_area_idx'],
    data(){
        return {
            currentShopid: null,
            currentArmAreaIdx: null,
            alarmStamp:null,
            currentArmAreaStatus: null,
            //保存已经login的nvr，以及nvr的素有channles
        }
    },
    methods: {
        clickStartPlay( channel ){
            console.log( " playing  channel:  ", channel );
            var channel_parts = channel.split( "#");
            var ip = channel_parts[0];
            var channelId = parseInt( channel_parts[1] );
            var nvr = this.shop.nvrs[ip];

            clickLogin( ip, 80, "admin", 'admin1234' ).then( ( data ) => { 
                console.log( "click start real play ");
                clickStartRealPlay( ip, channelId );
            });
        },

        Close(){
            bus.$emit( "CloseArmAreaVideo", null );
        },

        testNVR(){
            var addr = {
                "ip": "192.168.1.253",
                "port": 80,
                "username": "admin",
                "password": "admin1234",
                "streamtype": 1
            }

            clickLogin( ip, 80, 'admin', 'admin1234' ).then( ()=> {
                clickStartRealPlay( ip,  default_channelId );
            });
        },

        ShowArmAreaStatus( s ) { 
            if( s == "c")
                return "撤防"
            else if( s == "b")
                return "布防"
            else 
                return "未知"
        },
        
    },

    created(){
        console.log( "currentShopid : ", this.currentShopid );
        console.log( 'currentArmAreaIdx: ', this.currentArmAreaIdx );
        if( ! this.currentShopid ) { 
            this.currentShopid = Object.keys( this.$store.state.shops )[0];
            console.log( "currentShopid : ", this.currentShopid );
        }  
        if( ! this.currentArmAreaIdx){
            this.currentArmAreaIdx = Object.keys( this.$store.state.shops[ this.currentShopid].arm_areas)[0]
            console.log( 'currentArmAreaIdx: ', this.currentArmAreaIdx );
        }
    },
    mounted(){
        console.log( "------------------  arm area video mounted" ) ;
        console.log( document.getElementById( "rtspvideo"))
        bus.$on( "ArmAreaVideoPlay", ( data )=>{
            console.log( "ArmAreaVideoPlay event: ", data )
            this.currentShopid = data.shopid;
            this.currentArmAreaIdx = data.arm_area_idx;
            this.alarmStamp = data.stamp;
            this.$nextTick( ()=> { 
                console.log( this.currentChannels );
                var channel = this.currentChannels[0];
                this.clickStartPlay( channel );
            })
        });
        console.log( "init hikvision component ")
        initHikvision( 'rtspvideo' )
    },
    computed: { 
        shop() { 
            return this.$store.state.shops[this.currentShopid];
        },
        protector(){
            var mac = this.$store.state.shops[this.currentShopid].mac;
            return this.$store.state.protectors[mac];
        },
        currentChannels(){
            var channels = [];
            console.log( "current cameras",   this.shop.cameras);
            for( let channel in this.shop.cameras ) { 
                if( this.shop.cameras[channel] == this.currentArmAreaIdx ) { 
                    channels.push( channel );
                }
            }
            return channels;
        }
    }
}
</script>